<template>
  <div class="">
    <el-dialog title="提示" :show-close="false" :visible.sync="dialogVisible" top="15%" width="30%">
      <span>进入该页面必须选择商品</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="togoBus">确 定</el-button>
      </span>
    </el-dialog>
    <heads></heads>
    <main>
      <div class="contentHead">
        <h2>选择食品种类</h2>

        <el-form ref="foods" label-width="80px">
          <el-form-item label="食品种类">
            <el-select v-model="foods.foodsClassId" style="width: 100%" placeholder="请选择">
              <el-option v-for="(item, index) in optionsClass" :key="index" :label="item.foodClassName" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: center" class="contentMain" :class="isShowBox ? 'isHeight' : ''">
        <el-form ref="form" label-width="80px">
          <el-form-item label="种类名称">
            <el-input v-model="foodsClass.name"></el-input>
          </el-form-item>
          <el-form-item label="种类描述">
            <el-input v-model="foodsClass.text"></el-input>
          </el-form-item>
          <el-button type="primary" @click="addFoodsClass">提交</el-button>
        </el-form>
      </div>
      <div class="contentFooter" @click="handoff">
        <i class="el-icon-caret-bottom" v-if="isShowBox"></i>
        <i class="el-icon-caret-top" v-else></i>
        <span>显示添加食品分类菜单</span>
      </div>
      <div class="addFoods">
        <h2>添加食品</h2>
        <el-form label-width="100px" ref="foods" :model="foods" :rules="rules" class="demo-ruleForm">
          <el-form-item label="食品名称" prop="name">
            <el-input v-model="foods.name"></el-input>
          </el-form-item>
          <el-form-item label="食品活动" prop="activi">
            <el-input v-model="foods.activi"></el-input>
          </el-form-item>
          <el-form-item label="食品详情" prop="textInfo">
            <el-input v-model="foods.textInfo"></el-input>
          </el-form-item>
          <el-form-item label="上传食品图片" prop="filePath">
            <el-upload ref="preUpload" action="http://127.0.0.1:8000/admin/Upload/addFile" :on-success="addImgSucc" :limit="1" list-type="picture-card" :auto-upload="true">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="食品特点" prop="peculiarity">
            <el-select placeholder="请选择特点" v-model="foods.peculiarity">
              <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="食品规格">
            <el-radio v-model="showSelect" :label="1">单选项</el-radio>
            <el-radio v-model="showSelect" :label="0">多选项</el-radio>
          </el-form-item>
          <template v-if="showSelect">
            <el-form-item label="包装费">
              <el-input-number v-model="foods.numMoney" :min="1" :max="10" label="描述文字"></el-input-number>
            </el-form-item>
            <el-form-item label="价格">
              <el-input-number v-model="foods.money" :min="1" :max="25" label="描述文字"></el-input-number>
            </el-form-item>
          </template>
          <template v-else>
            <div style="text-align: center">
              <el-button type="primary" @click="dialogFormVisibleSpeci = true">添加规格</el-button>
              <el-table :data="speciArr" style="width: 100%">
                <el-table-column prop="speciName" label="标题" width="180"> </el-table-column>
                <el-table-column prop="wrapMoney" label="包装费" width="180"> </el-table-column>
                <el-table-column prop="foodMoney" label="价格"> </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="deleteSpeciItem(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
          <el-form-item>
            <el-button type="primary" @click="addFoodsInfo">提交</el-button>
            <el-button @click="foodsReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog title="添加规格" :visible.sync="dialogFormVisibleSpeci">
        <el-form :model="speci">
          <el-form-item label="规格">
            <el-input v-model="speci.speciName" autocomplete="off" style="width: 50%"></el-input>
          </el-form-item>
          <el-form-item label="包装费">
            <el-input-number v-model="speci.wrapMoney" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item label="价  格">
            <el-input-number style="margin-left: 10px" v-model="speci.foodMoney" :min="1" :max="25" label="描述文字"></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleSpeci = false">取 消</el-button>
          <el-button type="primary" @click="addSpecis">确 定</el-button>
        </div>
      </el-dialog>
    </main>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import heads from "@/components/adminHead.vue";

import { addFooClass, selectFooClass, addFoods, deleteFile } from "@/api/getPostApi";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    heads,
  },
  props: ["busId"],
  data() {
    //这里存放数据
    return {
      isShowBox: false,
      dialogVisible: false,
      dialogFormVisibleSpeci: false,
      showSelect: 1,
      options: [
        {
          value: "招牌",
          label: "招牌",
        },
        {
          value: "推荐",
          label: "推荐",
        },
      ],
      foods: {
        name: "",
        activi: "",
        textInfo: "",
        filePath: "",
        peculiarity: "",
        numMoney: 0,
        money: 20,
        foodsClassId: "",
      },
      rules: {
        name: [{ required: true, message: "请输入食品名称", trigger: "blur" }],
        activi: [{ required: true, message: "请输入食品名称", trigger: "blur" }],
        textInfo: [{ required: true, message: "请输入食品详情", trigger: "blur" }],
        filePath: [{ required: true, message: "请上传食品图片", trigger: "change" }],
        peculiarity: [{ required: true, message: "请选择食品特点", trigger: "blur" }],
      },
      foodsClass: {
        name: "",
        text: "",
      },
      optionsClass: [],
      speciArr: [
        {
          speciName: "默认",
          wrapMoney: 0,
          foodMoney: 15,
        },
      ],
      speci: {
        speciName: "",
        wrapMoney: 5,
        foodMoney: 10,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handoff() {
      this.isShowBox = !this.isShowBox;
    },
    togoBus() {
      this.$router.push("/admin/businessList");
    },
    togoHome() {
      this.$router.push("/admin/businessList");
    },
    addFoodsClass() {
      addFooClass(this.foodsClass.name, this.foodsClass.text).then((response) => {
        if (response.data.status === 200) {
          this.foodsClassList();
          this.$message({
            message: "恭喜你，成功添加食品分类",
            type: "success",
          });
        } else {
          this.$message.error("错了哦，添加食品分类失败");
        }
        this.foodsClass.name = "";
        this.foodsClass.text = "";
      });
    },
    addImgSucc(val) {
      this.foods.filePath = val;
    },
    foodsClassList() {
      selectFooClass().then((response) => {
        this.optionsClass = response.data;
      });
    },
    addFoodsInfo() {
      if (!this.foods.foodsClassId) {
        this.$message.error("请选择商品分类");
        return;
      }
      this.$refs.foods.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.speciArr.length === 1) {
          this.speciArr[0].wrapMoney = this.foods.numMoney;
          this.speciArr[0].foodMoney = this.foods.money;
        }
        addFoods(this.foods.name, this.foods.textInfo, this.foods.filePath, this.foods.peculiarity, this.busId, this.foods.foodsClassId, this.speciArr).then((response) => {
          if (response.data.status === "200") {
            this.$message({
              message: "恭喜你，成功添加食品",
              type: "success",
            });
          } else {
            this.$message.error("错了哦，添加食品失败");
          }
          this.$refs.preUpload.uploadFiles = [];
          this.speciArr = [
            {
              speciName: "默认",
              wrapMoney: 0,
              foodMoney: 15,
            },
          ];
          this.$refs.foods.resetFields();
        });
        return true;
      });
    },
    addSpecis() {
      this.dialogFormVisibleSpeci = false;
      this.speciArr.push(JSON.parse(JSON.stringify(this.speci)));
      this.speci.speciName = "";
      this.speci.wrapMoney = 5;
      this.speci.foodMoney = 10;
    },
    foodsReset() {
      this.$refs.preUpload.uploadFiles = [];
      if (this.foods.filePath) {
        deleteFile(this.foods.filePath);
      }
      this.speciArr = [
        {
          speciName: "默认",
          wrapMoney: 0,
          foodMoney: 15,
        },
      ];
      this.$refs.foods.resetFields();
    },
    deleteSpeciItem(index) {
      if (index) {
        this.speciArr.splice(index, 1);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (!this.busId) {
      this.dialogVisible = true;
    }
    this.foodsClassList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.contentHead {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #eee;
  padding: 20px;
  h2 {
    text-align: center;
    margin-bottom: 10px;
  }
}
.contentMain {
  width: 50%;
  background-color: mintcream;

  padding: 0px;
  margin: 0 auto;
  height: 0;
  overflow: hidden;
  transition: all 0.5s;
}

.contentFooter {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #eee;
  padding: 5px 20px;
  text-align: center;
  cursor: pointer;
}

.isHeight {
  height: 150px;
  padding: 20px;
  transition: all 0.5s;
}

.addFoods {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #eee;
  padding: 5px 20px;
  h2 {
    text-align: center;
  }
}
</style>
